<template>
  <div>
    <el-card>
      <el-table
        size="small"
        border
        style="margin-bottom: 20px"
        row-key="id"
        :data="permissionList"
        :props="defaultProps"
        :expand-row-keys="expandKeys"
        v-loading="isLoading"
      >

        <el-table-column prop="name" label="名称" />
        <el-table-column prop="code" label="权限值" />

        <el-table-column prop="toCode" label="跳转权限值" />

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="small"
              :disabled="scope.row.level === 4"
              @click="addMenu(scope.row)"
            />

            <el-button
              type="primary"
              icon="el-icon-edit-outline"
              size="small"
              :disabled="scope.row.level === 1"
              @click="editMenuOrFunction(scope.row)"
            />



          <el-popconfirm
            :title="`确定要删除[${scope.row.name}]吗？`"
            @confirm="delHandle(scope.row)"
          >
          
            <el-button
              slot="reference"
              type="danger"
              icon="el-icon-delete"
              size="small"
              title="删除"
              class="ml_10"
              :disabled="scope.row.level === 1"
            />
          </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>

      <el-dialog 
        :visible.sync="dialogVisible" 
        :title="dialogTitle" 
        @close="resetData">
        
        <el-form ref="permissionRef" :rules="permissionRules" :model="permission"  label-width="120px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="permission.name"/>
          </el-form-item>
          
          <el-form-item label="功能权限值" prop="code">
            <el-input v-model="permission.code"/>
          </el-form-item>

          <el-form-item label="跳转路由权限值" prop="toCode" v-if="row.title === 'edit' && row.level === 4">
            <el-input v-model="permission.toCode"/>
          </el-form-item>
        </el-form>
        
        <template #footer>
          <el-button @click="resetData">取 消</el-button>
          <el-button type="primary" @click="addOrUpdatePermission">确 定</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {mapActions,mapState} from 'vuex'
import {cloneDeep} from 'lodash'
import { Message } from 'element-ui';
export default {
  name: "Permission",
  data(){
    return {
      defaultProps:{
        children:'children',
        label:'name'
      },
      isLoading:false,
      dialogVisible:false,
      permission:{
        name:'',
        code:'',
        toCode:'',
      },
      row:{},
    }
  },
  computed:{
    ...mapState({
      permissionList:state => state.aclPermission.permissionList,
      expandKeys:state => state.aclPermission.expandKeys,
    }),
    dialogTitle(){
      if(this.row.title === 'add'){
        return '添加菜单'
      }
      if(this.row.title === 'edit' && this.row.level !== 4){
        return '修改菜单'
      } 
      if(this.row.title === 'edit' && this.row.level === 4){
        return '修改功能'
      }
    },
    permissionRules(){
        // 菜单权限校验的规则
      const menuRules = { 
        name: [{required: true, message: '名称必须输入'}],
        code: [{required: true, message: '权限值必须输入'}],
      }
      // 按钮功能权限校验的规则
      const btnRules = { 
        name: [{required: true, message: '名称必须输入'}],
        code: [{required: true, trigger: 'blur', message: '功能权限值必须输入'}]
      }
      return this.row.level !== 4 ? menuRules : btnRules
    }
  },
  methods:{
    ...mapActions('aclPermission',
      [
        'getPermissionList',
        'removePermission',
        'addPermission',
        'updatePermission',
      ],
    ),
    async delHandle(row){
      await this.removePermission(row.id)
      this.setPermissionList()
    },
    async setPermissionList(){
      this.isLoading = true
      await this.getPermissionList()
      this.isLoading = false

    },
    resetData(){
      
      this.dialogVisible = false
      this.permission = this.initPermission()
      this.setPermissionList()
    },
    addOrUpdatePermission(){
      if(!(this.permission.name && this.permission.code)){
        Message.error('输入有误')
        return 
      }


      if(this.row.title === 'add'){
        this.add()
      }
      if(this.row.title === 'edit'){
        this.updatePermission(this.permission)
      }

      this.resetData()
    },
    addMenu(row){
      this.row = row
      this.row.title = 'add'
      this.dialogVisible = true
      

    },
    editMenuOrFunction(row){
      this.row = row
      this.row.title = 'edit'
      this.dialogVisible = true
      this.permission = cloneDeep(this.row)

    },
    // 新增菜单功能函数
    add(){
      
      this.permission.level = this.row.level + 1
      this.permission.pid = this.row.id 
      this.addPermission(this.permission)
      this.resetData()
    },
    initPermission(){
      return {
        name:'',
        code:'',
        toCode:'',
      }
    },

  },
  mounted(){
    this.setPermissionList()
  }
};
</script>

<style scoped>
</style>